<div [style.width.px]="width">
    <div class="clr-input-wrapper filter-label-input">
        <input
            class="clr-input"
            type="text"
            autocomplete="off"
            placeholder="{{ 'LABEL.FILTER_LABEL_PLACEHOLDER' | translate }}"
            [(ngModel)]="searchValue"
            (keyup)="search()" />
    </div>
    <div class="no-labels" [hidden]="!loading">
        <span class="spinner spinner-inline"></span>
    </div>
    <div [hidden]="loading">
        <div
            [hidden]="candidateLabels.length"
            class="no-labels"
            (click)="goToLabelPage()">
            {{ 'LABEL.NO_LABELS' | translate }}
        </div>
        <div [hidden]="!candidateLabels.length" class="has-label">
            <button
                type="button"
                class="dropdown-item"
                *ngFor="let label of candidateLabels"
                (click)="selectLabel(label)">
                <clr-icon
                    shape="check"
                    class="check-icon"
                    [style.visibility]="isSelect(label) ? 'visible' : 'hidden'">
                </clr-icon>
                <hbr-label-piece [label]="label" [labelWidth]="130">
                </hbr-label-piece>
            </button>
        </div>
    </div>
</div>
